/**
 * @class StackWidget
 * @extends Ext.util.Observable
 */
var StackWidget = function(el, config) {
  this.el = Ext.get(el);
  this.el.addClass('af-wgt');

  Ext.apply(this, config);

  this.header = el.createChild({ cls : 'af-wgt-hd', html : '&#160;' });
  this.body = el.createChild({ cls : 'af-wgt-bd' });
  
  this.header.unselectable();

  if (this.title) {
    this.header.update(this.title);
  }

  this.hwrap = this.header.wrap({ cls : 'af-wgt-wgt-head' });
  this.hwrap.wrap({ cls : 'af-wgt-hd-right' }).wrap({ cls : 'af-wgt-hd-left' }, true);

  this.toolbox = this.hwrap.createChild({ cls : 'af-wgt-toolbox' });
  this.hwrap.createChild({ cls : 'af-wgt-clear', style : 'clear:both' });

  this.el.addClass('af-wgt-closable');
  this.el.on('click', this.focus, this);

  this.closeBtn = this.toolbox.createChild({ cls : 'af-wgt-close' });
  this.closeBtn.on('click', this.closeClick, this);
  this.closeBtn.addClassOnOver('af-wgt-close-over');

  this.collapseBtn = this.toolbox.createChild({ cls : 'af-wgt-collapse' });
  this.collapseBtn.on('click', this.collapseClick, this);
  this.collapseBtn.addClassOnOver('af-wgt-collapse-over');

  this.hwrap.on('dblclick', this.headerDblClick, this);

  this.bwrap = this.body.wrap({ cls : 'af-wgt-wgt-body' });
 
  this.proxy = this.el.createProxy({ cls : 'af-wgt-proxy' });
  this.proxy.setOpacity(.5);
  this.proxy.hide();

  this.dd = new Ext.dd.DDProxy(this.el, 'WidgetDD', { dragElId : this.proxy.id });
  this.dd.ddGroup = 'WidgetDD';
  this.dd.setHandleElId(this.hwrap.id);

  this.dd.endDrag = this.endMove.createDelegate(this);
  this.dd.startDrag = this.startMove.createDelegate(this);
  this.dd.onDragEnter = this.onDragEnter.createDelegate(this);
  this.dd.onDragOver = this.onDragOver.createDelegate(this);
  this.dd.onDragOut = this.onDragOut.createDelegate(this);
  this.dd.onDragDrop = this.onDragDrop.createDelegate(this);

  this.bmargin = new WidgetMargin(this.el.createChild({ cls : 'af-wgt-margin' }), this);

  this.addEvents({
    'focus' : true,
    'hide' : true,
    'show' : true,
    'destroy' : true
  });
}


Ext.extend(StackWidget, Ext.util.Observable, {
  startMove : function() {
    this.proxy.show();
  }
  ,
  endMove : function() {
    this.proxy.hide();
  }
  ,
  onDragEnter : function(e, id) {
    var target = Ext.dd.DragDropMgr.getDDById(id);
    if (target.isNotifyTarget) target.notifyEnter(this.dd, e, this);
  }
  ,
  onDragOver : function(e, id) {
    var target = Ext.dd.DragDropMgr.getDDById(id);
    if (target.isNotifyTarget) target.notifyOver(this.dd, e, this);
  }
  ,
  onDragOut : function(e, id) {
    var target = Ext.dd.DragDropMgr.getDDById(id);
    if (target.isNotifyTarget) target.notifyOut(this.dd, e, this);
  }
  ,
  onDragDrop : function(e, id) {
    var target = Ext.dd.DragDropMgr.getDDById(id);
    if (target.isNotifyTarget) target.notifyDrop(this.dd, e, this);
  }
  ,
  setTitle : function(text) {
    this.header.update(text);
    return this;
  }
  ,
  setContent : function(text) {
    this.body.update(text);
    return this;
  }
  ,
  closeClick : function(e) {
    e.stopPropagation();
    this.destroy();
  }
  ,
  collapseClick : function(e) {
    e.stopPropagation();
    this.toggle();
  }
  ,
  adjustSize : function() {
    this.el.setWidth(550);
  }
  ,
  toggle : function() {
    this[this.collapsed ? 'expand' : 'collapse']();
  }
  ,
  headerDblClick : function() {
    this.toggle();
  }
  ,
  collapse : function() {
    if (!this.collapsed) {
      this.collapsed = true;
      this.el.addClass('af-wgt-collapsed');
    }
  }
  ,
  expand : function() {
    if (this.collapsed) {
      this.collapsed = false;
      this.el.removeClass('af-wgt-collapsed');
    }
  }
  ,
  repaint : function() {
    this.el.repaint();
  }
  ,
  show : function() {
    if (!this.el.isVisible()) {
      this.el.show();
      this.focus(); 
      if (Ext.isIE) {
        this.el.repaint();
      }
      this.fireEvent('show', this);
    }
  }
  ,
  hide : function(callback) {
    if (typeof callback == 'function') {
      opt = { callback : callback, scope : this };
    } 
	else {
      opt = false;
    }
    this.el.hide(opt);
    this.fireEvent('hide', this);
    return this;
  }
  ,
  focus : function() {
    this.fireEvent('focus', this);
    this.el.setOpacity(.9999);
  }
  ,
  blur : function() {
    this.el.setOpacity(.5);
  }
  ,
  destroy : function() {
    this.hide(function() {
      Ext.destroy(this.closeBtn, this.collapseBtn);
      this.el.removeAllListeners();
      this.el.update('');
      this.el.remove();
      this.fireEvent('destroy', this);
    });
  }
  ,
  isVisible : function() {
    return this.el.isVisible();
  }
  ,
  getEl : function() {
    return this.el;
  }
});
